<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: #f00;
				/* transition 连写 */
				transition: width 5s linear 0s;
				
				/* 多个属性连写 */
				/* transition: width 5s linear 0s, background 5s linear 0s ; */
				
				/* 可以省略后面的两个参数 */
					/* transition: width 5s, background 5s; */
					
				/* 如果多个属性的持续时间/运动的速度/延迟的时间都一样, 那么可以简写 */
					/* transition: all 5s linear 3s; */
				}
			.box:hover{
				width: 500px;
				background: #00f;
			}
		</style>
	</head>
	<body>
		<!-- 
		 过渡连写
		 1.过渡连写格式
		 transition: 过渡属性 过渡时长 运动速度 延迟时间;
		 
		 2. 过渡连写注意点
		 
		 2-1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
		 2-2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
		 2-3如果多个属性的持续时间/运动的速度/延迟的时间都一样, 那么可以简写为
		 transition:all 5s linear 3s;
		 transition:all 5s;
		 -->
		 
		 <div class="box"></div>
	</body>
</html>
